<template>
	<view class="content">
		<view class="box">
			<view class="head">
				快递大小
			</view>
			<view class="classify-box">
				<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
					<u-tag size="large" :text="`${item.name}`" :plain="!item.checked" type="warning" :name="item.name"
						@click="radioClick">
					</u-tag>
				</view>
			</view>
			<view class="help_information">
				<text class="hm">帮助信息</text>
				<view class="help_information_box">
					<textarea style="paddingTop: 10px;" :maxlength="100" v-model="message.help_information" class="help"
						placeholder="请输入帮助信息,限制100字" />
				</view>
			</view>
			<view class="help_information">
				<text class="hm">取件码或截图</text>
				<view class="help_information_box2">
					<uni-file-picker limit="1" v-model="imgList" fileMediatype="image" mode="grid" />
					</u-upload>
				</view>
			</view>
			<view class="tip">
				<view class="location m">
					<text class="h">取货地点:</text>
					<input type="text" :disabled="true" v-model="message.pick_location" value="" class="qu" placeholder="选择取货地点" @click="userFocus" />
					<uni-icons type="location" size="16"></uni-icons>
				</view>
				<view class="money m">
					<text class="h">跑腿金额:</text>
					<input type="number" v-model="message.money" value="" class="qu" placeholder="请输入金额" />
					<uni-icons type="arrowright" size="16"></uni-icons>
				</view>
				<view class="location m">
					<text class="h">性别限制:</text>
					<input :disabled="true" :hold-keyboard="true" :adjust-position="false" @click="this.isPickShowSex = !this.isPickShowSex" type="text"  v-model="sex"   value="" class="qu" />	
					<uni-icons type="location" size="16"></uni-icons>
				</view>
				<view class="tip">
					<view class="tt">
						如果需要代拿更多大小，请加价。
					</view>
					<view class="yuan">
						跑腿费
					</view>
					<view class="yuan1">
						{{message.money ? message.money : ''}}元
					</view>
					<button type="default" class="btnfb" @click="fbclick">立即发布</button>
				</view>
				<u-picker @confirm="userConfirmData"  :closeOnClickOverlay="true" @cancel="closePick" @close="closePick" title="取货地址" :show="isShowPick" :columns="columns"></u-picker>
				
				<u-picker @confirm="changeSex" :closeOnClickOverlay="true" @cancel="cancePickSex" @close="cancePickSex" title="性别限制" :show="isPickShowSex" :columns="sexColumns"></u-picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radios: [{
						checked: true,
						name: '小件'
					},
					{
						checked: false,
						name: '中件'
					},
					{
						checked: false,
						name: '大件'
					}
				],
				checkboxs: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				],
				message: {
					help_information: '',
					money: '',
					pick_location: '',
					img: '',
					postmethods: '小件',
					methods: '1'
				},
				moneyUser: '',
				imgList: [],
				code: '',
				isShowPick: false,
				columns: [
					['60栋', '菜鸟驿站']
				],
				sexColumns: [
					['性别不限','男','女']
				],
				isPickShowSex: false,
				sex: '性别不限'
			};
		},
		onLoad() {
			this.getWebXinCode()
		},
		methods: {
			cancePickSex () {
				this.isPickShowSex = false
			},
			changeSex (e) {
				this.sex = e.value[0]
				this.isPickShowSex = false
				if (e.value[0] == '性别不限') {
					this.addcs.sex = '0'
				}
				else if (e.value[0] == '男') {
					this.addcs.sex = '1'
				}
				else if (e.value[0] == '女') {
					this.addcs.sex = '2'
				}
			},
			closePick () {
				this.isShowPick = false
			},
			userConfirmData (e) {
				this.message.pick_location = e.value[0];
				this.isShowPick = false
			},
			/*
				选择地址
			*/
		   userFocus (e) {
			 this.isShowPick = true
		   },
			/*
							getWnenXinCode
						*/
			getWebXinCode() {
				let _this = this
				wx.login({
					success(res) {
						_this.code = res.code
					}
				})
			},
			fbclick() {
				this.message.img = this.imgList[0] ? this.imgList[0].url : 'none'
				if (this.message.money.trim().length === 0 || this.message.pick_location.trim().length === 0 || this
					.message.help_information.trim().length === 0) {
					console.log(this.message)
					return uni.showToast({
						title: '请输入',
						duration: 1500,
						icon: 'none'
					})
				}
				let re = /^[0-9]+.?[0-9]*/
				if (!re.test(this.message.money)) {
					return uni.showToast({
						title: '请输入正确的金额',
						duration: 1500,
						icon: 'none'
					})
				}
				let _this = this
				uni.requestSubscribeMessage({
					tmplIds: ['-YIfyEVG0k7hLER1NYtzw_sJNT9uKJWHMCl9ZcNCwwg'],
					success: async (res) => {
						if (res['-YIfyEVG0k7hLER1NYtzw_sJNT9uKJWHMCl9ZcNCwwg'] !== 'accept') return
						let prames = {
							code: _this.code,
							template_id: '-YIfyEVG0k7hLER1NYtzw_sJNT9uKJWHMCl9ZcNCwwg'
						}
						const {
							data: res2
						} = await uni.$http.post('/message/addWenXinMessage', prames)
						if (res2.status !== 200) return uni.showToast({
							icon: 'none',
							title: '订阅失败',
							duration: 2000
						})
					},
					fail: (res) => {
						console.log(res)
					},
					complete: (res) => {
						uni.navigateTo({
							url: '/pay/selectPayMethods/selectPayMethods?addErrandParams=' + JSON
								.stringify(this.message)
						})
					}
				})
			},
			showToast(name, money) {
				this.moneyUser = money
				uni.showToast({
					icon: 'none',
					title: name,
					duration: 2000
				})
			},
			radioClick(name) {
				if (name === '小件') this.showToast('手机大小的盒子，建议价格2元', 2)
				if (name === '中件') this.showToast('超过鞋子、盒子大小的，建议价格4元', 3)
				if (name === '大件') this.showToast('重量超过5公斤的，建议价格6元', 5)
				this.message.postmethods = name
				this.radios.map((item, index) => {
					item.checked = item.name === name ? true : false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F0F0F0;
		margin-bottom: 5px;
		padding: 10rpx 3px 10rpx 3px;
		font-size: 12px;
	}

	.btnfb {
		background-color: #007AFF !important;
		color: #FFFFFF !important;
		font-size: 14px !important;
		border-radius: 10px !important;
	}

	.tip {
		margin-top: 20px;
		text-align: center;

		.tt {

			color: #007AFF;
			font-size: 14px;
		}

		.yuan {
			margin-top: 10px;
			font-size: 12px;
			color: #C0C0C0;
		}

		.yuan1 {
			font-size: 14px;
			color: #C00000;
			margin-bottom: 10px;
		}
	}

	.yuan1 {
		font-size: 14px;
		color: #C00000;
		margin-bottom: 10px;
	}

	.help_information {
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;

		.help_information_box {
			padding: 10rpx 0;
		}

		.help_information_box2 {
			padding: 10rpx 0 0 0;
		}
	}

	.classify-box {
		border-bottom: 1px solid #f0f0f0;
		padding: 20rpx 0;
	}

	.hm {
		font-size: 12px;
		color: #303133;
		display: block;
		width: 45%;
		padding-bottom: 10rpx;
		width: 100%;
		border-bottom: 1px solid #f0f0f0;
	}

	.u-page__tag-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.content {
		margin: 40rpx 20rpx;

		.box {
			padding: 40rpx 20rpx;
			box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
			border-radius: 10rpx;

			.head {
				padding: 20rpx 0;
				text-align: center;
			}

			.classify-box {
				display: flex;
			}
		}
	}
</style>
